<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <body>
    <div class="bg">
      <div class="twinCircle">
        <h4 class="label">双圆实现进度条</h4>
        <div class="progress-vol">
          <svg xmlns="http://www.w3.org/2000/svg">
            <circle cx="40" cy="40" r="20" stroke-width="8" class="c1"></circle>
            <circle
              cx="40"
              cy="40"
              r="20"
              stroke-width="8"
              stroke-dasharray="0,1000"
              class="c2"
              id="tw-circle"
            ></circle>
          </svg>
          <div id="tw-content"></div>
        </div>
      </div>
      <div class="pathCircle">
        <h4 class="label">Path做法</h4>
        <div class="progress-vol">
          <svg xmlns="http://www.w3.org/2000/svg">
            <circle cx="40" cy="40" r="20" stroke-width="8" class="c1"></circle>
            <path
              d=""
              stroke="white"
              stroke-width="8"
              fill="transparent"
              id="pa-circle"
            ></path>
            <circle
              cx="40"
              cy="40"
              r="20"
              stroke-width="8"
              class="c2"
              id="pa-100"
              style="display: none"
            ></circle>
          </svg>
          <div id="pa-content"></div>
        </div>
      </div>
    </div>
    <div class="bg2">
      <div class="polyline-default">
        <h4 class="label">基本</h4>
        <svg xmlns="http://www.w3.org/2000/svg">
          <g>
            <!-- scale使图形反转，translate控制展示位置 -->
            <polyline
              transform="translate(0,80) scale(1,-1)"
              points=""
              id="polyline-default"
            ></polyline>
          </g>
        </svg>
      </div>
      <div class="polyline-linear">
        <h4 class="label">渐变</h4>
        <svg xmlns="http://www.w3.org/2000/svg">
          <defs>
            <linearGradient
              id="polyline-gradient"
              x1="0"
              x2="0"
              y1="0"
              y2="100%"
              gradientUnits="userSpaceOnUse"
            >
            </linearGradient>
            <mask x="0" y="0" width="100%" height="100%" id="polyline-mask">
              <polyline
                transform="translate(0,80) scale(1,-1)"
                points=""
                id="polyline-linear"
              ></polyline>
            </mask>
          </defs>
          <g>
            <rect
              x="0"
              y="0"
              width="100%"
              height="100%"
              stroke="none"
              mask="url(#polyline-mask)"
              fill="url(#polyline-gradient)"
            ></rect>
          </g>
        </svg>
      </div>
    </div>
  </body>
</html>
